<template>
  <div class="w">

    <!-- 标题 -->
    <div class="title-area">
      <span>
        操作日志
      </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">

      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="form"
          ref="formRef"
          :labelCol="{span: 5, offset: 0}"
          @finish="formFinish"
          :initialValues="initQueryForm">

          <Row :gutter="16">
            <Col :span="8">
              <FormItem name="title" label="系统模块" initialValue="">
                <Input placeholder="请输入系统模块" style="width: 70%" />
              </FormItem>
            </Col>
            <Col :span="8">
               <FormItem name="operName" label="操作人员" initialValue="">
                <Input placeholder="请输入操作人员" style="width: 70%" />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem name="businessType" label="类型" initialValue="" style="position: relative;" class="selectPosition">
               <Select placeholder="请选择操作类型" :getPopupContainer="getPopupContainer" style="width: 70%" allowClear>
                  <Option v-for="type in dict.type.sys_oper_type" :key="type.value" :label="type.label" :value="type.value"></Option>
                </Select>
              </FormItem>
            </Col>
              <Col :span="8">
              <FormItem name="status" label="状态" initialValue="" style="position: relative;" class="selectPosition">
               <Select placeholder="请选择操作状态" :getPopupContainer="getPopupContainer" style="width: 70%" allowClear>
                  <Option v-for="type in dict.type.sys_common_status" :key="type.value" :label="type.label" :value="type.value"></Option>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8" :offset="8">
              <FormItem :wrapperCol="{span: 20, offset: 5}">
                <Button type="primary" @click="formQuery">
                  <Icon name="search" style="margin-top: 3px; margin-right: 5px;" /> 查 询
                </Button>
                <Button style="margin-left: 10px" @click="formReset">
                  <Icon name="rollback-outline" style="margin-top: 3px; margin-right: 5px;" /> 重 置
                </Button>
                <!-- <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button> -->
              </FormItem>
            </Col>
          </Row>  
        </Form>
      </div>

      <!-- 分割线 -->
      <Divider />

      <!-- 按钮区 -->
      <div class="button-area">
      </div>

      <!-- 列表区 -->
      <Skeleton
        :loading="loading"
        :avatar="false"
        :paragraph="{ rows: 6 }"
        active>
        
        <Table
          style="margin-top: 20px"
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :scroll="{ y: 470 }"
          @change="handleTableChange"
          :pagination="{
            total: total,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSize: queryForm.pageSize,
            current: queryForm.pageNum,
          }">

          <template #render="render">
            <div v-if="render.dataIndex == 'status'">
             <dict-tag :options="dict.type.sys_common_status" :value="render.record.status"/>
            </div>
            <div v-else-if="render.dataIndex == 'businessType'">
           <dict-tag :options="dict.type.sys_oper_type" :value="render.record.businessType"/>
            </div>
            <div v-else-if="render.dataIndex == 'operation'">
            <a href="#" @click.prevent="tblOptForm(render.record)">
              <Icon name="edit" style="margin-top: 4px;" /> 详细
            </a>
            </div>
          </template>
           <template #paginationTotal="props">
            <span>总共 {{ props.total }} 条</span>
          </template>
        </Table>
       </Skeleton>
    </div>

    <!-- 表单页对话框 -->
    <Modal
      class="fromModal"
      :title="formDialogInfo.title"
      v-model="formDialogInfo.visible"
      @cancel="formDialogInfo.visible = false"
      width="1100px"
      :bodyStyle="{ padding: '0px' }"
      :footer="[null]">

      <resource-form
        :key="Date.now()" 
        :id="formDialogInfo.id" 
        :currRow="formDialogInfo.currRow" 
        :refData="{
          resourceTypes: this.dict.type.resource_type
        }" 
        @handleCancel="formDialogCancel" />
    </Modal>
  </div>
</template>

<script>
import { Message } from "@uni/vue";
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
import resourceForm from "./form.vue"
export default {
  name: "operLog",
  dicts: ['sys_oper_type', 'sys_common_status'],
  components: {
    resourceForm
  },
  data: function () {
    return {
      loading: true,
      formDialogInfo: {
        title: '',
        visible: false,
        id: 0,
        currRow: {}
      },
      initQueryForm: {
        title: '',
        operName: '',
        businessType: '',
        status: ''
      },
      queryForm: {},
      tableColumns: [
        // {"title":"日志编号", "dataIndex":"operId", "key":"operId", "align":"center", width:80},
        {"title":"系统模块", "dataIndex":"title", "key":"title", "align":"center"},
        {"title":"操作类型", "dataIndex":"businessType", "key":"businessType", "align":"center"},
        {"title":"请求方式", "dataIndex":"requestMethod", "key":"requestMethod", "align":"center"},
        {"title":"操作人员", "dataIndex":"operName", "key":"operName", "align":"center",width:80},
        {"title":"操作地址", "dataIndex":"operIp", "key":"operIp",  "align":"center", width:120},
        {"title":"操作地点", "dataIndex":"operLocation", "key":"operLocation", "align":"center", width:150},
        {"title":"操作状态", "dataIndex":"status", "key":"status",  "align":"center"},
        {"title":"操作日期", "dataIndex":"operTime", "key":"operTime", "align":"center", width:150},
        {"title":"操作", "dataIndex":"operation", "key":"operation", "align":"center", "width":120}
      ],
      tableData: [],
      total: 0,
      roleOptions: [],
    }
  },
  created() {
  },
  mounted() {
    this.formFinish();
  },
  methods: {
    getPopupContainer() {
      return document.querySelector(".selectPosition")
    },
    tblOptForm(record) {
      this.formDialogInfo.currRow = record ? record : {};
      this.formDialogInfo.title = '操作日志详细';
      this.formDialogInfo.visible = true;
    },
    formQuery() {
      this.$refs.formRef.submit();
    },
    formReset() {
      this.$refs.formRef.reset();
    },
    async queryList() {
      this.loading = true;
      const rs = await list(this.queryForm);
      if (rs.code !== 200) return Message.error({ text: '获取用户列表信息失败：' + rs.msg });
      this.tableData = rs.rows;
      this.total = rs.total;
      this.loading = false;
    },
    async formFinish(formValues) {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        title: formValues ? formValues.title : '',
        operName: formValues ? formValues.operName : '',
        businessType: formValues ? formValues.businessType : '',
        status: formValues ? formValues.status : '',
      };
      this.queryList();
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.queryForm.pageNum = current;
      this.queryForm.pageSize = pageSize;
      this.queryList();
      console.log('filters', p, filters);
    },
    formDialogCancel() {
      this.formDialogInfo.visible = false;
      this.formFinish();
    },
    async removeDataLine(record) {
      const rs = await delOperlog(record.operId);
      if (rs.code !== 200) return Message.error({ text: '删除用户信息失败：' + rs.msg });

      Message.success({ text: '删除信息完成' });
      this.formQuery();
    },
  }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-top: 15px;
    margin-left: 50px;
    margin-right: 50px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */

  /* 弹框区 */
  ::v-deep .fromModal > .uni-modal-wrap > .uni-modal-wrap-content > .uni-modal-footer {
    padding: 0;
  }
</style>
